<template>
  <div>
    <SearchForm
        @search="onSearch"
        @reset="onReset"
        :search-list="searchList" :search-params="searchParams">
    </SearchForm>

    <div class="table-layout">
      <el-card shadow="never">
        <div class="table-box">
          <el-table
              size="large"
              stripe
              border
              v-loading="loading"
              max-height="500px"
              :data="tableData"
              row-key="id"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
              @selection-change="onSelect"
          >
            <el-table-column prop="name" label="联系人" width="120"/>
            <el-table-column prop="phone" label="联系电话" width="130"/>
            <el-table-column prop="travel_date" label="旅行日期" width="120">
              <template slot-scope="scope">
                {{ formatDate(scope.row.travel_date) }}
              </template>
            </el-table-column>
            <el-table-column prop="destination" label="目的地" min-width="150"/>
            <el-table-column prop="adult_count" label="成人数量" width="100">
              <template slot-scope="scope">
                {{ scope.row.adult_count }}人
              </template>
            </el-table-column>
            <el-table-column prop="child_count" label="儿童数量" width="100">
              <template slot-scope="scope">
                {{ scope.row.child_count }}人
              </template>
            </el-table-column>
            <el-table-column prop="budget" label="预算" width="120">
              <template slot-scope="scope">
                ¥{{ scope.row.budget || '未设置' }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" fixed="left" width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === 0" type="warning">待处理</el-tag>
                <el-tag v-else-if="scope.row.status === 1" type="primary">处理中</el-tag>
                <el-tag v-else-if="scope.row.status === 2" type="success">已完成</el-tag>
                <el-tag v-else-if="scope.row.status === 3" type="info">已取消</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip/>
            <el-table-column prop="handler" label="处理人" width="120"/>
            <el-table-column prop="handler_remark" label="处理备注" min-width="200" show-overflow-tooltip/>
            <el-table-column prop="plan_file_path" label="方案文件" width="120">
              <template slot-scope="scope">
                <el-button 
                  v-if="scope.row.plan_file_path" 
                  type="text" 
                  @click="downloadPlan(scope.row.plan_file_path)">
                  下载方案
                </el-button>
                <span v-else>无方案</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="160">
              <template slot-scope="scope">
                {{ formatDateTime(scope.row.create_time) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
              <template slot-scope="scope">
                <!-- <el-button type="text" @click="onEdit(scope.row)">编辑</el-button> -->
                <el-button 
                  type="text" 
                  @click="onComplete(scope.row)">处理</el-button>
                <el-button type="text" style="color: #F82222" @click="onDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <div class="page-box">
        <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
        />
      </div>
    </div>
    <Add ref="addFormRef" @get-page="initData" />
  </div>
</template>

<script>
import crud from "@/mixins/crud";
import { http } from "@/api";
import Add from "./add";

export default {
  name: "TravelCustomIndex",
  components: {
    Add
  },
  mixins: [crud],
  data() {
    return {
      request: http.travelCustom,
      searchList: [
        {
          label: '联系人',
          prop: 'name',
          name: 'input',
          placeholder: '请输入联系人姓名'
        },
        {
          label: '联系电话',
          prop: 'phone',
          name: 'input',
          placeholder: '请输入联系电话'
        },
        {
          label: '目的地',
          prop: 'destination',
          name: 'input',
          placeholder: '请输入目的地'
        },
        {
          label: '旅行日期',
          prop: 'travel_date',
          name: 'date',
          placeholder: '请选择旅行日期'
        },
        {
          label: '状态',
          prop: 'status',
          name: 'select',
          placeholder: '请选择状态',
          options: [
            { value: '', label: '全部' },
            { value: 0, label: '待处理' },
            { value: 1, label: '处理中' },
            { value: 2, label: '已完成' },
            { value: 3, label: '已取消' }
          ]
        }
      ],
      searchParams: {
        name: '',
        phone: '',
        destination: '',
        travel_date: '',
        status: ''
      },
      defaultParams: {},
      tableData: [],
      // 完成弹窗相关数据
      completeDialogVisible: false,
      completeLoading: false,
      completeForm: {
        id: null,
        remark: ''
      },
      completeRules: {
        remark: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    formatDate(date) {
      if (!date) return '';
      return new Date(date).toLocaleDateString('zh-CN');
    },
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      return new Date(dateTime).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    onProcess(row) {
      this.$confirm('确认开始处理此自定义旅行需求？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.travelCustom.update(row.id, { status: 1 }).then(res => {
          this.$message.success('已开始处理');
          this.initData();
        });
      });
    },
    onComplete(row) {
      this.$refs.addFormRef.open(row)
    },
    downloadPlan(filePath) {
      if (filePath) {
        window.open(filePath, '_blank');
      }
    },
    confirmComplete() {
      this.$refs.completeFormRef.validate((valid) => {
        if (valid) {
          this.completeLoading = true;
          http.travelCustom.update(this.completeForm.id, { 
            status: 2,
            remark: this.completeForm.remark
          }).then(res => {
            this.$message.success('已完成处理');
            this.completeDialogVisible = false;
            this.initData();
          }).catch(err => {
            this.$message.error('操作失败：' + (err.message || '未知错误'));
          }).finally(() => {
            this.completeLoading = false;
          });
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.table-layout {
  margin-top: 20px;
}
.table-handle {
  margin-bottom: 20px;
}
.page-box {
  margin-top: 20px;
  text-align: right;
}

.dialog-footer {
  text-align: right;
}
</style>
